@import "common";
@baseFont: 50;

body {
    width: 15rem; // 这是个相对宽度
    min-width: 320px; // 因为指定的宽度是相当宽度，所以必须有个最小宽度
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    background-color: #f2f2f2;
}


.header-bar {
    display: flex;
    height: 88rem / @baseFont;
    background-color: #ffc001;

    position: fixed;
    width: 15rem; // 因为是定位元素，必须写宽度。 与body相同 ，写100%是否可以？
    top: 0;
    left: 50%;
    transform: translateX(-50%); // 居中

    >.categories {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background: url("../images/classify.png") no-repeat;
        background-position: center center;
        background-size: 44rem / @baseFont 70rem / @baseFont;

    }

    >.search-box {
        flex: 1;


        input {
            box-sizing: border-box;
            outline: none;
            border: 0;

            width: 100%;
            height: 66rem / @baseFont;

            margin-top: 12rem / @baseFont;
            border-radius: 33rem / @baseFont;

            padding-left: 45rem / @baseFont;
            font-size: 25rem / @baseFont;
            color: #757575;
        }
    }

    >.login-btn {
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 10rem / @baseFont;
        line-height: 70rem / @baseFont;
        text-align: center;
        color: #fff;
    }
}